<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米首页小功能案例</title>
    <style>
        body
        {
            background: #fff;
        }
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul{
            width: 606px;
            height: 504px;
            border: 1px solid pink;
            margin: 50px auto;
        }
        ul li{
            width: 198px;
            height: 248px;
            background: #FAFAFA;
            margin: 1px;
            float: left;
            cursor: pointer;
            text-align: center;
            border: 1px solid #bebebe;
            position: relative;
            z-index: 999;
        }
        .UL li .ImgDiv{
            width: 100%;
            height: 160px;
            text-align: center;
            margin-bottom: 10px;
        }
        .UL li p:first-of-type{
            font-size: 13px;
            margin-bottom: 2px;
        }
        .UL li p:nth-child(3){
            font-size: 12px;
            color: #bebebe;
            margin-bottom: 10px;
        }
        .UL li p:nth-child(4){
            font-size: 13px;
            color: orangered;
        }
        .UL li p:nth-child(4)>span:nth-child(1){
            color: orangered;
        }
        .UL li p:nth-child(4)>del{
            color: #bebebe;
        }
        .UL li p:nth-child(4)>del>span{
            color: #bebebe;
        }
        .UL li p{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .nullP{
            width: 100%;
            height: 16px;
        }
        .HiddenDiv{
            background: orangered;
            width: 100%;
            height: 60px;
            /* position: absolute; */
            /* top: 188px; */
            transition: all .8s;
            z-index: 1;
            margin-top: 50px;
        }
        .HiddenDiv .HiddenDiv_Content{
            width: 80%;
            height: 90%;
            margin:0 auto;
            font-size: 12px;
            margin-top: 5px;
            
        }
        .HiddenDiv_Content span{
            display: block;
            text-align: left;
        }
        .HiddenDiv_Content span:first-of-type{
            color: #fff;
            margin-bottom: 7px;
        }
        .HiddenDiv_Content span:last-of-type{
            color: #bebebe;
        }
    </style>
</head>
<body>
    <ul class="UL">
        <li title="小米电视4A 43英寸青春版">
            <div class="ImgDiv">
                <img src="img/T1riKjB7VT1RXrhCrK.jpg" alt="">
            </div>
            <p>小米电视4A 43英寸青春版</p>
            <p>全高清屏 / 人工智能语音</p>
            <p>
                <span>1399</span>元
                <del>
                    <span>1699</span>元
                </del>
            </p>
            <div class="HiddenDiv">
                <div class="HiddenDiv_Content">
                    <span>外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！</span>
                    <span> 来自于 嘉仁宫 的评价 </span>
                </div>
            </div>
        </li>
        <li title="小米电视4C 50英寸">
            <div class="ImgDiv">
                <img src="img/T19AbjBCDT1RXrhCrK.jpg" alt="">
            </div>
            <p>小米电视4C 50英寸</p>
            <p>4K HDR / 人工智能语音</p>
            <p>
                <span>1899</span>元
                <del>
                    <span>2199</span>元
                </del>
            </p>
            <div class="HiddenDiv">
                <div class="HiddenDiv_Content">
                    <span>外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！</span>
                    <span> 来自于 嘉仁宫 的评价 </span>
                </div>
            </div>
        </li>
        <li title="'15.6'笔记本 i5 4G MX110">
            <div class="ImgDiv">
                <img src="img/T1meZjBCAT1RXrhCrK.jpg" alt="">
            </div>
            <p>"15.6"笔记本 i5 4G MX110</p>
            <p  class="nullP"></p>
            <p>
                <span>3999</span>元
                <del>
                    <span>4199</span>元
                </del>
            </p>
            <div class="HiddenDiv">
                <div class="HiddenDiv_Content">
                    <span>外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！</span>
                    <span> 来自于 嘉仁宫 的评价 </span>
                </div>
            </div>
        </li>
        <li title="'13.3'小米笔记本Air 四核i7 8G 256G MX150 银色">
            <div class="ImgDiv">
                <img src="img/T1tsEgB7DT1RXrhCrK.jpg" alt="">
            </div>
            <p>"13.3"小米笔记本Air 四核i7 8G 256G MX150 银色</p>
            <p class="nullP"></p>
            <p>
                <span>5999</span>元
            </p>
            <div class="HiddenDiv">
                <div class="HiddenDiv_Content">
                    <span>外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！</span>
                    <span> 来自于 嘉仁宫 的评价 </span>
                </div>
            </div>
        </li>
        <li title="米家电水壶">
            <div class="ImgDiv">
                <img src="img/T10TJjB5hT1RXrhCrK.jpg" alt="">
            </div>
            <p>米家电水壶</p>
            <p>一杯水，是一家人的安心</p>
            <p>
                <span>99</span>元
            </p>
            <div class="HiddenDiv">
                <div class="HiddenDiv_Content">
                    <span>外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！</span>
                    <span> 来自于 嘉仁宫 的评价 </span>
                </div>
            </div>
        </li>
        <li title="米家LED吸顶灯">
            <div class="ImgDiv">
                <img src="img/T16eEjBKhT1RXrhCrK.jpg" alt="">
            </div>
            <p>米家LED吸顶灯</p>
            <p>用光线，还原理想生活</p>
            <p>
                <span>389</span>元
                <del>
                    <span>399</span>元
                </del>
            </p>
            <div class="HiddenDiv">
                <div class="HiddenDiv_Content">
                    <span>外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！</span>
                    <span> 来自于 嘉仁宫 的评价 </span>
                </div>
            </div>
        </li>
    </ul>
</body>
<script>
    //获取元素
    var HiddenDiv = document.getElementsByClassName("HiddenDiv");
    var li = document.getElementsByTagName("li");
    var HiddenDiv_Content = document.getElementsByClassName("HiddenDiv_Content");
    for(var i = 0;i<li.length;i++){
        li[i].index = i;
        li[i].onmouseover = function(){
            HiddenDiv[this.index].style.top = "188px";
        }
        li[i].onmouseout = function(){
            HiddenDiv[this.index].style.top = "288px";
        }
    }
</script>
</html>